<template>
  <!-- search-bar -->
  <SearchBar></SearchBar>
  <!-- content -->
  <div class="centent">
    <el-row>
      <el-col :span="4">
        <!-- aside -->
        <div class="aside">
          <Aside/>
        </div>

      </el-col>
      <el-col :span="20">
        <!-- main-top -->
        <div class="main-top">
          <el-row>
            <el-col :span="18">
              <div class="main-top-left">
                <CarouselMap />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="main-top-right">
                <UserMent></UserMent>
              </div>
            </el-col>
          </el-row>

        </div>
      </el-col>
    </el-row>
    <!-- main-bottom -->
    <div class="main-bottom">
      <Overview />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"
import {
  Monitor,
  Menu as IconMenu,
  Grid,
  MessageBox,
  ArrowRight,
  Iphone,
} from '@element-plus/icons-vue'
import Aside from './components/Aside/index.vue'
import CarouselMap from './components/CarouselMap/index.vue'
import Overview from './components/Overview/index.vue'
import UserMent from './components/UserMenu/index.vue'
import SearchBar from '@/components/SearchBar/index.vue'



</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.centent {
  min-width: 1200px;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  padding-top: 10px;

  .main-top {
    margin-right: 40px;
    min-width: 950px;
    background-color: #fff;
    border: 2px solid @border-color;
    border-radius: 10px;

    &-left {
      padding: 30px;
      min-width: 590px;
    }

    &-right {
      padding: 30px 30px 30px 0;
      // min-width: 295px;

      .user-menu {
        height: 300px;
        // background-color: #99a9bf;
      }
    }
  }

  .main-bottom {
    padding-bottom: 40px;
  }
}
</style>